
import React from 'react';
import ReactDOM from 'react-dom';

import TableList from 'component/table-list/index.jsx';

import MUtil from 'util/mm.jsx';
const _mm = new MUtil();

import './index.css'

class App extends React.Component{
	// 构造函数
	constructor(props){
		super(props);
		this.state = {
			inputValue 		: '',
			newList 	    : [],
			doneList        : []
		}
	}
	// 生命周期，当加载完执行
	componentDidMount(){
		this.loadTodoList();
	}
	// 监听输入框变化
	onInputChange(e){
		this.setState({
			inputValue : e.target.value
		})
	}
	// 输入框回车
	onInputKeyUp(e){
		if(e.keyCode === 13){
			this.addThing();
		}
	}
	// 添加计划
	addThing(){
		let data = this.state.inputValue;
		if(!! data){
			let result = _mm.createJson(data),
				count  = parseInt(_mm.getData('count-new'));
			_mm.saveData('count-new' + count, result);
			_mm.saveData('count-new', ++count);
			this.loadTodoList()
		}
	}
	// 完成计划
	completeThing(e){
		let id 		  = e.target.name,
			data 	  = _mm.getData('count-new' + id),
			countDone = _mm.getData('count-done');
		data.dtime = new Date().toLocaleString();
		_mm.deleteData('count-new' + id);2
		_mm.saveData('count-done' + countDone, data);			
		_mm.saveData('count-done', ++countDone);
		this.loadTodoList();
	}
	// 删除计划
	deleteThing(e){
		let id = e.target.name;
		console.log(_mm.getData('count-new' + id))
		_mm.deleteData('count-new' + id);
		this.loadTodoList();
	}
	// 清理缓存
	clearAllThing(){
		_mm.clearStorage();
		_mm.initStorage();
		this.loadTodoList();
	}
	loadTodoList(){
		let	countNew    = parseInt(_mm.getData('count-new')),
			countDone   = parseInt(_mm.getData('count-done'));
		let result1 = [],
			result2 = [];
		// 从localStorage取出未完成的计划
		for(let i = 1; i < countNew; i++){
			let temp = _mm.getData('count-new' + i);//字符串
			if(!!temp){
				result1.push(temp);
			}
		}
		// 从localStorage取出已完成的计划
		for(let i = 1; i < countDone; i++){
			let temp = _mm.getData('count-done' + i);//字符串
			if(!!temp){
				result2.push(temp);
			}
		}
		this.setState({
			newList  : result1,
			doneList : result2
		})
	}
	render(){
		let newListBody = this.state.newList.map((item, index) =>{
			return (
				<tr key={index} className="text-info">
					<td>{item.num}</td>
					<td>{item.data}</td>
					<td>{item.ctime}</td>
					<td>
						<button name={item.num} className="btn btn-primary" onClick={(e) => {this.completeThing(e)}}>完成</button>
						<button name={item.num} className="btn btn-danger" onClick={(e) => {this.deleteThing(e)}}>删除</button>
					</td>
				</tr>
			);
		});
		let doneListBody = this.state.doneList.map((item, index) =>{
			return (
				<tr key={index} className="text-danger">
					<td>{item.num}</td>
					<td>{item.data}</td>
					<td>{item.ctime}</td>
					<td>{item.dtime}</td>
				</tr>
			);
		});
		let tableHeads1 = [
			{name : '序号', width : '10%'},
			{name : '标题', width : '50%'},
			{name : '创建时间', width : '20%'},
			{name : '操作', width : '20%'}
		]
		let tableHeads2 = [
			{name : '序号', width : '10%'},
			{name : '标题', width : '50%'},
			{name : '创建时间', width : '20%'},
			{name : '完成时间', width : '20%'}
		]
		return(
			<div>
				<div className="Top">
					 <input type="text" className="form-control input-thing" 
					 		placeholder="请输入计划" 
					 		onChange={(e) => {this.onInputChange(e)}}
					 		onKeyUp={(e) => {this.onInputKeyUp(e)}}
					 		autoFocus=""/>
					 <button className="btn btn-primary btn-add" onClick={() => {this.addThing()}}>增加</button>
				</div>
				<div className="clearStorage">
					<button className="btn btn-danger btn-clear" onClick={() => {this.clearAllThing()}}>清理缓存</button>
				</div>
				<div className="page-wrapper">
					<label className="text-info items">待完成的计划</label>
					<TableList tableHeads={tableHeads1}>

						{newListBody}
					</TableList>
					<label className="text-danger items">已完成的计划</label>
					<TableList tableHeads={tableHeads2}>
						{doneListBody}
					</TableList>
				</div>
			</div>

		);
	}
}

ReactDOM.render(
	<div>
		<App/>
	</div>,
	document.getElementById('container')
);
